

<template>
  <div class="rightCZ">
    <div>
      <div class="selects">
        <div class="selectTables" style="float: left">
          <el-popover placement="bottom-end" width="500px" trigger="focus">
            <el-input
              placeholder="选择诊断"
              slot="reference"
              v-model="selectParams2.keyword"
              @input="getDrugItem()"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-radio-group
              v-model="isCollapse"
              @change="hadejiancha"
              style="margin-bottom: 20px"
            >
              <el-radio-button :label="1">入院诊断</el-radio-button>
              <el-radio-button :label="2">门诊诊断</el-radio-button>
              <el-radio-button :label="3">出院诊断</el-radio-button>
            </el-radio-group>
            <el-table
           
              height="300"
              @row-click="xuanzeDatathree"
              :data="selectData2.selectData1"
              style="width: 100%"
            >
              <el-table-column label="序号" prop="id" width="50">
              </el-table-column>

              <el-table-column label="疾病编码" prop="code" width="150">
              </el-table-column>
              <el-table-column label="疾病名称" prop="name" width="250">
              </el-table-column>
            </el-table>
             <el-pagination
                    :current-page="selectParams2.page"
                    :page-size="selectParams2.limit"
                    @current-change="handlePagination"
                    :total="selectParams2.pageCount"
                    layout="prev, pager, next"
                  >
                  </el-pagination>

          </el-popover>
        </div>
      </div>
      <div>
        <el-table :data="tableData1" style="width: 100%">
          <template v-for="(item, index) in tableTitle">
            <el-table-column
              :width="item.width"
              v-if="item.prop == 'name'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-popover
                    placement="bottom-end"
                    width="500px"
                    trigger="focus"
                  >
                    <el-input
                      placeholder="选择诊断"
                      slot="reference"
                      v-model="scope.row.name"
                      @input="getDrugItem2(scope.row.name, scope.$index)"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-search"
                      ></i>
                    </el-input>
                    <el-radio-group
                      v-model="isCollapse"
                      @change="hadejiancha"
                      style="margin-bottom: 20px"
                    >
                      <el-radio-button :label="1">入院诊断</el-radio-button>
                      <el-radio-button :label="2">门诊诊断</el-radio-button>
                      <el-radio-button :label="3">出院诊断</el-radio-button>
                    </el-radio-group>
                    <el-table
                      v-loading="threeSelectLoading"
                      height="300"
                      @row-click="xuanzeDatathree2"
                      :data="selectData2.selectData1"
                      style="width: 100%"
                    >
                      <el-table-column label="序号" prop="id" width="50">
                      </el-table-column>

                      <el-table-column label="疾病编码" prop="code" width="150">
                      </el-table-column>
                      <el-table-column label="疾病名称" prop="name" width="250">
                      </el-table-column>
                    </el-table>
                       <el-pagination
                    :current-page="selectParams2.page2"
                    :page-size="selectParams2.limit2"
                    @current-change="handlePagination2"
                    :total="selectParams2.pageCount2"
                    layout="prev, pager, next"
                  >
                  </el-pagination>
                  </el-popover>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'maindiag_flag'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-checkbox
                    v-model="scope.row.maindiag_flag"
                 
                  ></el-checkbox>
                     <!-- @change="zhengduanchage(scope.row,scope.$index)" -->
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'diag_type'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select
                    v-model="scope.row.diag_type"
                    placeholder="诊断类别"
                  >
                    <el-option
                      v-for="item in zhenlei"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'result_id'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select
                    v-model="scope.row.result_id"
                    placeholder="治疗结果"
                  >
                    <el-option
                      v-for="item in zhenliao"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'death_id'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-select
                        v-model="scope.row.death_id"
                        placeholder="死亡原因"
                      >
                        <el-option
                          v-for="item in siwang"
                          :key="item.name"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </template>
                </el-table-column> -->

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'adm_cond_type'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-select
                    v-model="scope.row.adm_cond_type"
                    placeholder="入院病情类型"
                  >
                    <el-option
                      v-for="item in bingqing"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'diagnostic_time'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-date-picker
                    v-model="scope.row.diagnostic_time"
                    type="date"
                    placeholder="选择日期"
                  
                    value-format="yyyy-MM-dd HH:mm:ss"
                  >
                  </el-date-picker>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'disease_time'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-date-picker
                    v-model="scope.row.disease_time"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </span>
              </template>
            </el-table-column>

            <!-- <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'death_time'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-date-picker
                        v-model="scope.row.death_time"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                      >
                      </el-date-picker>
                    </span>
                  </template>
                </el-table-column> -->

            <el-table-column
              v-else-if="item.prop == 'day'"
              :width="item.width"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <el-input v-model="scope.row.day" placeholder=""></el-input>
                </span>
              </template>
            </el-table-column>

            <!-- <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'is_operation'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-checkbox
                        v-model="scope.row.is_operation"
                      
                      ></el-checkbox>
                    </span>
                  </template>
             
                </el-table-column> -->
            <!-- <el-table-column
                  :width="item.width"
                  v-else-if="item.prop == 'is_contagion'"
                  :prop="item.prop"
                  :label="item.label"
                  :key="index"
                >
                  <template slot-scope="scope">
                    <span>
                      <el-checkbox
                        v-model="scope.row.is_contagion"
                      
                      ></el-checkbox>
                    </span>
                  </template>
             
                </el-table-column> -->

            <el-table-column
              :width="item.width"
              v-else-if="item.prop == 'adm_cond'"
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
              <template slot-scope="scope">
                <span>
                  <span>
                    <el-input
                      v-model="scope.row.adm_cond"
                      placeholder="病情描述"
                    ></el-input>
                  </span>
                </span>
              </template>
            </el-table-column>

            <el-table-column
              :width="item.width"
              v-else
              :prop="item.prop"
              :label="item.label"
              :key="index"
            >
            </el-table-column>
          </template>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData1,scope.row)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getDiagonsis, deleteDiagonsis } from "@/api/zhuyanre";
import { getdictIndex } from "@/api/register";
import ViewTitle from "@/forComponents/viewTitle";
export default {
  props: ["selectParams2", "selectData2", "id2",'dtime'],

  data() {
    return {
      threeSelectLoading: false,
      tabIndex: "three",
      params: {},
      search: "",
      two_select_data: [],
      remark: "",
      isCollapse: 1,

      tableTitle: [
        {
          prop: "type",
          label: "诊断类型",
        },
        {
          prop: "number",
          label: "诊断编码",
        },
        {
          prop: "name",
          label: "诊断名称",
          width: "300px",
        },
        {
          prop: "maindiag_flag",
          label: "是否主诊断",
        },
        {
          prop: "result_id",
          label: "诊疗结果",
          width: "150",
        },
        {
          prop: "diagnostic_time",
          label: "诊断时间",
          width: "200",
        },
        {
          prop: "disease_time",
          label: "发病时间",

          width: "200",
        },
        {
          prop: "day",
          label: "诊疗天数",
        },
        {
          prop: "diag_type",
          label: "诊断类别",
          width: "200",
        },

        // {
        //   prop: "is_operation",
        //   label: "手术"
        // },
        // {
        //   prop: "is_contagion",
        //   label: "传染"
        // },
        //  {
        //   prop: "death_time",
        //   label: "死亡时间",
        //   width: "150"
        // },
        // {
        //   prop: "death_id",
        //   label: "死亡原因",
        //   width: "150"
        // },
        {
          prop: "adm_cond_type",
          label: "入院病情类型",
          width: "150",
        },
        {
          prop: "adm_cond",
          label: "入院病情描述",
          width: "200",
        },
      ],

      siwang: [],
      zhenliao: [],
      tableData1: [],
      tableData2: [],
      tableData: [],
      bingqing: [],
      zhenlei: [],
      index_t: 0,
    };
  },
  mounted() {
    this.getdiet_list();
    this.getDiagonsis(this.id2);
  },
     watch:{
      id2(no){
         this.getDiagonsis(this.id2);
      }
   },
  methods: {
    //获取诊断列表
    getDiagonsis(e) {
      var data = {
        id: e,
      };
      this.tableData1=[]
      getDiagonsis(data).then((res) => {
       
        // u
        var num=res.data.length
       if(num==1){
         this.tableData1=res.data[0].lists
       }else if(num==2){
         this.tableData1=res.data[0].lists.concat(res.data[1].lists)
       }else if(num==3){
        this.tableData1=res.data[0].lists.concat(res.data[1].lists).concat(res.data[2].lists)

       }
        var a = [],
          b = [],
          c = [];
           if(this.tableData1.length!=0){
        for (let i = 0; i < this.tableData1.length; i++) {
          if (this.tableData1[i].type == 1) {
            this.tableData1[i].type = "入院诊断";
            this.tableData1[i].maindiag_flag =
              this.tableData1[i].maindiag_flag == 1 ? true : false;
            a.push(this.tableData1[i]);
          } else if (this.tableData1[i].type == 2) {
            this.tableData1[i].type = "出院诊断";
            this.tableData1[i].maindiag_flag =
              this.tableData1[i].maindiag_flag == 1 ? true : false;
            b.push(this.tableData1[i]);
          } else if (this.tableData1[i].type == 3) {
            this.tableData1[i].type = "门诊诊断";
            this.tableData1[i].maindiag_flag =
              this.tableData1[i].maindiag_flag == 1 ? true : false;
            c.push(this.tableData1[i]);
          }
        }
        this.$set(this.tableData1, a.concat(b).concat(c));
        console.log(this.tableData1);
                  
        }
      });
    },
       handlePagination2(e) {
      this.threeSelectLoading = true;
      this.selectParams2.page2 = e;
      this.$emit("getDiseaseDict2");
    
    },
        handlePagination(e) {
      this.threeSelectLoading = true;
      this.selectParams2.page = e;
      this.$emit("getDiseaseDict");
    
    },
    zhengduanchage(row, index) {
      var array = this.tableData1;
console.log(array[index])
      for (let i = 0; i < array.length; i++) {
        if (array[index].maindiag_flag) {
          if (i != index) {
            array[i].maindiag_flag = false;
          }
        }else{
            array[i].maindiag_flag = false;
        }
      }
      console.log(row.maindiag_flag);
    },
    //匹配
    // matching(arr,i){

    //      var art = "";
    //      var that=this
    //       switch (i) {
    //         case 1:
    //               for (var i in that.thatF.disu) {
    //       if (that.thatF.disu[i].id == arr) {

    //         art = that.thatF.disu[i].name;
    //       }
    //       return art;
    //     }
    //           break;

    //          case 2:
    //               for (var i in that.thatF.pinci) {
    //       if (that.thatF.pinci[i].id == arr) {

    //         art = that.thatF.pinci[i].name;
    //       }
    //       return art;
    //     }
    //           break;
    //           case 3:
    //               for (var i in that.thatF.geiyao) {
    //       if (that.thatF.geiyao[i].id == arr) {

    //         art = that.thatF.geiyao[i].name;
    //       }
    //       return art;
    //     }
    //           break;
    //           case 4:
    //               for (var i in that.thatF.xiyaojiaozhu) {
    //       if (that.thatF.xiyaojiaozhu[i].id == arr) {

    //         art = that.thatF.xiyaojiaozhu[i].name;
    //       }
    //       console.log( that.thatF.xiyaojiaozhu)
    //       return art;
    //     }
    //           break;
    //       }

    //   },
    getdiet_list() {
      getdictIndex({ group_id: "48,49,52,68,67" })
        .then((res) => {
          let data = res.data;

          data.forEach((item, key) => {
            if (item.id == 52) {
              this.siwang = item.items;
            } else if (item.id == 48) {
              this.zhenliao = item.items;
            } else if (item.id == 68) {
              this.bingqing = item.items;
            } else if (item.id == 67) {
              this.zhenlei = item.items;
            }
          });
        })
        .catch((e) => {});
    },

    //保存
    createAdvice() {
      this.$emit("createAdvice2", this.tableData1);
    },
    getDrugItem() {
      // this.threeSelectLoading = true;
       this.selectParams2.page = 1;
      this.$emit("getDiseaseDict");
    },
    getDrugItem2(item, index) {
      this.selectParams2.page2 = 1;
      this.selectParams2.keyword2 = item;
      this.index_t = index;
      this.$emit("getDiseaseDict2");
    },

    // hadejiancha() {
    //   this.$emit("getDiseaseDict", this.isCollapse);
    // },
    deleteRow(index, rows,row) {
      console.log(rows)
      if (row.id != "0") {
        deleteDiagonsis({ id: row.id }).then((res) => {
          if (res.code) {
            this.$message({
                  message: "删除成功",
                  type: "success"
                });
          }
        });
      }
      rows.splice(index, 1);
    },
    xuanzeDatathree2(item) {
      console.log(item, this.index_t);
      item.number = item.code;
      item.disease_id = item.id;
      item.id = "0";
      item.adm_cond_type=808
      item.diag_type=804
      item.type = this.tableData1[this.index_t].type;
      if(item.type=='入院诊断'){
        item.diagnostic_time=this.dtime
      }
      this.$set(this.tableData1, this.index_t, item);
    },
    xuanzeDatathree(item) {
      var arr = JSON.parse(JSON.stringify(item));
      arr.number = item.code;
      arr.disease_id = item.id;
      arr.id = "0";
      arr.adm_cond_type=808
       arr.diag_type=804
      if (this.isCollapse == 1) {
        arr.type = "入院诊断";
        arr.diagnostic_time=this.dtime
      } else if (this.isCollapse == 2) {
        arr.type = "门诊诊断";
      } else if (this.isCollapse == 3) {
        arr.type = "出院诊断";
      }

      console.log(this.tableData1);
      this.tableData1 = this.tableData1.concat(arr);
      console.log(this.tableData1);
      var a = [],
        b = [],
        c = [];
      for (let i = 0; i < this.tableData1.length; i++) {
        if (this.tableData1[i].type == "入院诊断") {
          console.log(this.tableData1[i]);
          a.push(this.tableData1[i]);
        } else if (this.tableData1[i].type == "门诊诊断") {
          b.push(this.tableData1[i]);
        } else if (this.tableData1[i].type == "出院诊断") {
          c.push(this.tableData1[i]);
        }
      }
      // this.tableData1=a.concat(b).concat(c)
      this.$set(this.tableData1, a.concat(b).concat(c));
    },
  },
  components: { ViewTitle },
};
</script>
<style lang='scss' scoped>
.userinfo {
  display: flex;
  align-items: center;
  border: 1px solid #e7e7e7;
  padding-left: 30px;
  line-height: 60px;
  border-radius: 20px;
  margin-bottom: 20px;
  > div {
    flex: 1;
  }
}
.buts {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.selects {
  position: relative;
  // /deep/ .el-input{
  //   width: 300px;
  // }

  .selectTables {
    width: 300px;
  }
}
</style>